{% extends '__base__.html' %}

{% block title %}网盘{% endblock %}
{% block content %}
<div class="container">
    <div class="row">
        <div class="btn-toolbar col-md-8" role="toolbar" aria-label="Toolbar with button groups">
            <div class="btn-group mr-2" role="group" aria-label="First group">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#filezone">上传</button>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mkdir">新建文件夹</button>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#offline">离线下载</button>
                <button type="button" class="btn btn-primary export" data-path="/{{ path | join('/') }}">导出</button>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#import">导入</button>
                <button type="button" class="btn btn-primary update_poster"
                    data-path="/{{ path | join('/') }}">更新封面</button>
            </div>
            <input id="view-toogle" class="float-right" type="checkbox" {% if mode %} checked {% endif %}
                data-path="{{ path }}" data-toggle="toggle" data-on="列表视图" data-off="网格视图" data-onstyle="success"
                data-offstyle="danger">
        </div>
    </div>
    <div id="filezone" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <input id="fileElem" type="file" name="upload" style="display:none">
                <label id="fileSelect" class="text-center">Select some files</label>
            </div>
        </div>
    </div>
    <div id="mkdir" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="输入文件名" aria-label="Recipient's username"
                        aria-describedby="basic-addon2">
                    <button class="btn btn-success input-group-append" data-path="/{{ path | join('/') }}">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div id="offline" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="form-group">
                    <input type="checkbox" class="form-control" name="offline" data-toggle="toggle" data-on="离线下载"
                        data-off="新建文件" data-onstyle="success" data-offstyle="danger" data-width="100%" checked>
                    <input type="text" class="form-control" name="url" placeholder="输入URL">
                    <input type="text" class="form-control" name="name" placeholder="输入名称">
                    <input type="text" class="form-control" name="referer" placeholder="输入关联网页">
                    <input type="text" class="form-control" name="poster_referer" placeholder="输入封面地址">
                </div>
                <button class="btn btn-success text-center" data-path="/{{ path | join('/') }}">确定</button>
            </div>
        </div>
    </div>
    <!-- fileopt | diropt -->
    <div id="showfile" class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content overflow-auto">
                <div class="modal-header"></div>
                <div class="modal-body d-flex justify-content-center"></div>
            </div>
        </div>
    </div>
    <div id="move" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="输入目标文件夹" aria-label="Recipient's username"
                        aria-describedby="basic-addon2">
                    <button class="btn btn-success input-group-append" data-path="/{{ path | join('/') }}">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div id="rename" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="输入新的文件名" aria-label="Recipient's username"
                        aria-describedby="basic-addon2">
                    <button class="btn btn-success input-group-append" data-path="/{{ path | join('/') }}">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div id="referer" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
            </div>
        </div>
    </div>
    <div id="status" class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
            </div>
        </div>
    </div>
    <div id="export" class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <textarea style="height: 50vh" readonly></textarea>
            </div>
        </div>
    </div>
    <div id="import" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="input-group">
                    <textarea type="text" class="form-control" placeholder="输入导入数据"></textarea>
                    <button class="btn btn-success input-group-append">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div id="update" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="form-group">
                    <input type="text" class="form-control" name="path" readonly>
                    <input type="text" class="form-control" name="status" placeholder="输入状态">
                    <input type="text" class="form-control" name="referer" placeholder="输入m3u8下载地址">
                    <input type="text" class="form-control" name="poster_referer" placeholder="输入封面下载地址">
                    <input type="text" class="form-control" name="referer_referer" placeholder="输入关联网页">
                    <input type="text" class="form-control" name="url" placeholder="输入播放URI">
                    <!-- <input type="text" class="form-control" name="show" placeholder="是否展示"> -->
                    <button class="btn btn-sm" data-toggle="collapse" data-target="#load_src" aria-expanded="false"
                        aria-controls="load_src">展开播放源</button>
                </div>
                <div class="form-group collapse multi-collapse load_src" id="load_src">
                    <button class="btn btn-primary">获取播放源</button>
                    <input type="text" class="form-control" name="dom_path" placeholder="过滤器"
                        value="[{'video': {'attr': {'id': 'video-play'}, 'string': ''}}]">
                    <input type="text" class="form-control" name="get_res" placeholder="信息处理"
                        value="{'attrs': ['data-src', 'data-poster']}">
                    <textarea class="form-control" name="result">信息获取中...</textarea>
                </div>
                <button class="btn btn-success text-center" data-path="/{{ path | join('/') }}">确定</button>
            </div>
        </div>
    </div>
    <div class="row">
        <nav class="col-md-8" aria-label="breadcrumb">
            <ol class="breadcrumb">
                {% with %}
                {% for item in path %}
                {% if loop.last %}
                <li class="breadcrumb-item active" aria-current="page">{{ item }}</li>
                {% else %}
                <li class="breadcrumb-item"><a
                        href="/hls?path=/{{ path | range_slice(0, loop.index) | join('/')}}&mode={% if mode%}true{%else%}false{% endif %}">{{ item }}</a>
                </li>
                {% endif %}
                {% endfor %}
                {% endwith %}
            </ol>
        </nav>
    </div>
    {% if mode %}
    <div class="row">
        <div class="col-md pb-4 table-responsive">
            <table class="table table-hover table-striped">
                <thead>
                    <tr>
                        <th scope="col" width="6%">类型</th>
                        <th scope="col" width="30%">文件名</th>
                        <th scope="col" width="6%">类型</th>
                        <th scope="col" width="16%">状态</th>
                        <th scope="col">创建时间</th>
                        <th scope="col">修改时间</th>
                        <th scope="col" width="6%">删除</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in files %}
                    <tr class="fileitem" data-path="{{ item.path }}/{{ item.name }}" data-name="{{ item.name }}"
                        data-url="{{ item.url }}" data-status="{{ item.status }}" data-type="{{ item.content_type }}"
                        data-referer_referer="{{ item.referer_referer }}"
                        data-poster_referer="{{ item.poster_referer }}" data-referer="{{ item.referer }}">
                        {% if item.content_type == 'd' %}
                        <th scope="row"><a href="/hls?path={{ item.path }}/{{ item.name }}"><i
                                    class="fa fa-folder-o"></i></a></th>
                        <td class="enter tb-filename" type=button data-path="{{ item.path }}/{{ item.name }}"
                            data-toggle="tooltip" data-placement="top" title="{{ item.name }}">
                            {{ item.name }}
                        </td>
                        {% else %}
                        <th scope="row"><i class="fa fa-file-o"></i></th>
                        <td {% if item.status == '1'%} class="showfile tb-filename" {% else %} class="tb-filename"
                            {% endif %} type=button data-path="{{ item.path }}/{{ item.name }}"
                            data-name="{{ item.name }}" data-url="{{ item.url }}" data-toggle="tooltip"
                            data-placement="top" title="{{ item.name }}">
                            {{ item.name }}
                        </td>
                        {% endif %}
                        <td>{{ item.content_type }}</td>
                        <td>{{ item.status | status_filter }}</td>
                        <td><span>{{ item.created_at }}</span></td>
                        <td>{{ item.updated_at }}</td>
                        <td><button class="btn btn-sm delete" data-path="{{ item.path }}/{{ item.name }}"><i
                                    class="fa fa-trash-o"></i></button></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% else %}
    <div class="row video-grid">
        {% for item in files %}
        <div class="colVideoList fileitem" style="cursor: pointer;" data-toggle="tooltip" data-placement="top"
            title="{{ item.name }}">
            {% if item.content_type == 'd' %}
            <div class="video-elem enter" {% else %} {% if item.status == '1' %} <div class="video-elem showfile"
                {% elif item.status == '0' %} <div class="video-elem"
                style="box-shadow:2px 2px 8px rgb(47, 206, 47), -2px 2px 8px rgb(47, 206, 47);border-radius: 5px; border-right: 1px solid rgb(47, 206, 47);"
                {% else %} <div class="video-elem"
                style="box-shadow:2px 2px 8px rgb(245, 85, 85), -2px 2px 8px rgb(245, 85, 85);border-radius: 5px; border-right: 1px solid rgb(245, 85, 85);"
                {% endif %} {% endif %} data-path="{{ item.path }}/{{ item.name }}" data-name="{{ item.name }}"
                data-url="{{ item.url }}" data-status="{{ item.status }}" data-type="{{ item.content_type }}"
                data-referer_referer="{{ item.referer_referer }}" data-poster_referer="{{ item.poster_referer }}"
                data-referer="{{ item.referer }}">
                <div class="display d-block">
                    <div class="scale"></div>
                    {% if item.content_type == 'd' %}
                    <div class="img" style="background-image: url('{{ static_url }}/app/folder.png')"></div>
                    {% else %}
                    <div class="img" {% if item.poster %}
                        style="background: url('{{ posterurl }}/{{ item.poster }}'), url('{{ static_url }}/app/404.png');background-size: cover;"
                        {% endif %}></div>
                    <!-- <div class="img" {% if item.poster %} style="background-image: url('{{ posterurl }}/{{ item.poster }}')" {% endif %}></div> -->
                    <small class="layer">
                        {{ item.duration | duration_filter }}
                    </small>
                    {% endif %}
                </div>
                <a class="title text-sub-title mt-2 mb-3">{{ item.name }}</a>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}
</div>
<div id="popupRC" style="display:none;background-color: antiquewhite;" class="panel panel-primary">
    <!-- <div class="panel-heading ">Right Click Window</div> -->
    <div class="panel-body">
        <button class="dropdown-item showfile">预览</button>
        <button class="dropdown-item enter">进入</button>
        <button class="dropdown-item move" type="button">移动</button>
        <button class="dropdown-item rename" type="button">重命名</button>
        <button class="dropdown-item export" type="button">导出</button>
        <button class="dropdown-item referer">源地址</button>
        <button class="dropdown-item pause">暂停</button>
        <button class="dropdown-item reflash">刷新</button>
        <button class="dropdown-item status">状态</button>
        <button class="dropdown-item restart">开始</button>
        <button class="dropdown-item update">修改</button>
        <button class="dropdown-item update_poster">更新封面</button>
    </div>
    <!-- <div class="panel-footer"><input type="button" class="btn" value="close" onClick="$('#popupRC').css({ display: 'none' });"/></div> -->
</div>
{% endblock %}

{% block beforebody %}
<script>
    $(document).ready(function () {
        $(".fileitem").bind('contextmenu', function (event) {
            event.preventDefault(); // prevents default menu 
            // let path = event.target.dataset['path'] ? event.target.dataset['path'] : (event.target.parentNode.dataset['path'] ? event.target.parentNode.dataset['path'] : event.target.parentNode.parentNode.dataset['path']) 
            // let url = event.target.dataset['url'] ? event.target.dataset['url'] : (event.target.parentNode.dataset['url'] ? event.target.parentNode.dataset['url'] : event.target.parentNode.parentNode.dataset['url']) 
            // let name = event.target.dataset['name'] ? event.target.dataset['name'] : (event.target.parentNode.dataset['name'] ? event.target.parentNode.dataset['name'] : event.target.parentNode.parentNode.dataset['name']) 
            // let type = event.target.dataset['type'] ? event.target.dataset['type'] : (event.target.parentNode.dataset['type'] ? event.target.parentNode.dataset['type'] : event.target.parentNode.parentNode.dataset['type']) 
            // let status = event.target.dataset['status'] ? event.target.dataset['status'] : (event.target.parentNode.dataset['status'] ? event.target.parentNode.dataset['status'] : event.target.parentNode.parentNode.dataset['status']) 
            // let referer = event.target.dataset['referer'] ? event.target.dataset['referer'] : (event.target.parentNode.dataset['referer'] ? event.target.parentNode.dataset['referer'] : event.target.parentNode.parentNode.dataset['referer']) 
            // let referer_referer = event.target.dataset['referer_referer'] ? event.target.dataset['referer_referer'] : (event.target.parentNode.dataset['referer_referer'] ? event.target.parentNode.dataset['referer_referer'] : event.target.parentNode.parentNode.dataset['referer_referer']) 
            // let poster_referer = event.target.dataset['poster_referer'] ? event.target.dataset['poster_referer'] : (event.target.parentNode.dataset['poster_referer'] ? event.target.parentNode.dataset['poster_referer'] : event.target.parentNode.parentNode.dataset['poster_referer']) 
            let path = get_parent_data(event.target, 'path')
            let url = get_parent_data(event.target, 'url')
            let name = get_parent_data(event.target, 'name')
            let type = get_parent_data(event.target, 'type')
            let status = get_parent_data(event.target, 'status')
            let referer = get_parent_data(event.target, 'referer')
            let referer_referer = get_parent_data(event.target, 'referer_referer')
            let poster_referer = get_parent_data(event.target, 'poster_referer')

            $("#popupRC .move")[0].dataset['path'] = path
            $("#popupRC .rename")[0].dataset['path'] = path
            $("#popupRC .export")[0].dataset['path'] = path
            if (type === 'd') {
                $("#popupRC .enter")[0].dataset['path'] = path
                $("#popupRC .enter").css({ display: "block" })
                $("#popupRC .showfile").css({ display: "none" })
                $("#popupRC .referer").css({ display: "none" })
                $("#popupRC .reflash").css({ display: "none" })
                $("#popupRC .pause").css({ display: "none" })
                $("#popupRC .status").css({ display: "none" })
                $("#popupRC .restart").css({ display: "none" })
                $("#popupRC .update").css({ display: "none" })
            } else {
                $("#popupRC .enter").css({ display: "none" })
                // 暂停
                if (status == '-1') {
                    $("#popupRC .restart")[0].dataset['path'] = path
                    $("#popupRC .restart").css({ display: "block" })
                    $("#popupRC .showfile").css({ display: "none" })
                    $("#popupRC .referer").css({ display: "none" })
                    $("#popupRC .reflash").css({ display: "none" })
                    $("#popupRC .pause").css({ display: "none" })
                    $("#popupRC .status").css({ display: "none" })
                }
                // 下载中
                if (status === '0') {
                    $("#popupRC .pause")[0].dataset['path'] = path
                    $("#popupRC .pause").css({ display: "block" })
                    $("#popupRC .status")[0].dataset['path'] = path
                    $("#popupRC .status").css({ display: "block" })
                    $("#popupRC .reflash")[0].dataset['path'] = path
                    $("#popupRC .reflash").css({ display: "block" })
                    $("#popupRC .showfile").css({ display: "none" })
                    $("#popupRC .referer").css({ display: "none" })
                    $("#popupRC .restart").css({ display: "none" })
                }
                // 下载完成
                if (status === '1') {
                    $("#popupRC .showfile")[0].dataset['url'] = url
                    $("#popupRC .showfile")[0].dataset['name'] = name
                    $("#popupRC .showfile").css({ display: "block" })
                    $("#popupRC .referer")[0].dataset['path'] = referer
                    $("#popupRC .referer").css({ display: "block" })
                    $("#popupRC .pause").css({ display: "none" })
                    $("#popupRC .reflash").css({ display: "none" })
                    $("#popupRC .restart").css({ display: "none" })
                    $("#popupRC .status").css({ display: "none" })
                }
                $("#popupRC .update")[0].dataset['status'] = status
                $("#popupRC .update")[0].dataset['path'] = path
                $("#popupRC .update")[0].dataset['referer'] = referer
                $("#popupRC .update")[0].dataset['referer_referer'] = referer_referer
                $("#popupRC .update")[0].dataset['poster_referer'] = poster_referer
                $("#popupRC .update")[0].dataset['url'] = url
                $("#popupRC .update").css({ display: "block" })
                // update_poster
                $("#popupRC .update_poster")[0].dataset['path'] = path
                $("#popupRC .update_poster").css({ display: "block" })
            }
            $("#popupRC").css({ position: "absolute", top: event.pageY, left: event.pageX, display: "block" });
        });
    });
    document.querySelectorAll('.video-elem').forEach(el => {
        el.addEventListener('click', function (event) {
            let url = event.target.dataset['url']
        })
    })
    // 新建文件夹
    document.querySelector('#mkdir button').addEventListener('click', event => {
        let el = event.target
        let parent = el.dataset["path"]
        let name = el.parentNode.querySelector('input').value
        axios.get('/hls/mkdir/' + name, {
            params: {
                parent: parent,
            }
        })
            .then(function (response) {
                // console.log(response);
                if (response.status === 200) {
                    let data = response.data
                    if (data['code'] === 0) {
                        console.log('SUCCESS: ' + data['msg'])
                        location.assign('/hls?path=' + data['msg'] + '&mode=' + document.querySelector('#view-toogle').checked)
                    } else {
                        console.log('FAILED: ' + data['msg'])
                        alert(data['msg'])
                    }
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    })
    // 离线下载
    document.querySelector('#offline button').addEventListener('click', event => {
        let el = event.target
        let parent = el.dataset["path"]
        let url = el.parentNode.querySelector('input[name="url"]').value
        let name = el.parentNode.querySelector('input[name="name"]').value
        let referer = el.parentNode.querySelector('input[name="referer"]').value
        let poster_referer = el.parentNode.querySelector('input[name="poster_referer"]').value
        let offline = el.parentNode.querySelector('input[name="offline"]').checked
        let get_url = offline ? '/hls/offline' : '/hls/newone'
        axios.get(get_url, {
            params: {
                parent: parent,
                url: url,
                name: name,
                referer: referer,
                poster_referer: poster_referer,
            }
        })
            .then(function (response) {
                // console.log(response);
                if (response.status === 200) {
                    let data = response.data
                    if (data['code'] === 0) {
                        console.log('SUCCESS: ' + data['msg'])
                        location.assign('/hls?path=' + data['msg'] + '&mode=' + document.querySelector('#view-toogle').checked)
                    } else {
                        console.log('FAILED: ' + data['msg'])
                        alert(data['msg'])
                    }
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    })
    // 导出
    document.querySelectorAll('.export').forEach(el => {
        el.addEventListener('click', function (event) {
            let fullpath = event.target.dataset["path"]
            axios.get('/hls/export', {
                params: {
                    fullpath: fullpath,
                }
            })
                .then(function (response) {
                    // console.log(response);
                    if (response.status === 200) {
                        let data = response.data
                        if (data['code'] === 0) {
                            console.log('SUCCESS: ' + data['msg'])
                        } else {
                            console.log('FAILED: ' + data['msg'])
                        }
                        document.querySelector('#export .modal-content textarea').innerHTML = data['msg']
                        // onpropertychange= "this.style.posHeight=this.scrollHeigh
                        $('#export').modal('show')
                        console.log(document.querySelector('#export .modal-content textarea').scrollHeight)
                        console.log(document.querySelector('#export .modal-content textarea').style.posHeight)
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        })
    })
    // 导入
    document.querySelector('#import button').addEventListener('click', function (event) {
        let data = event.target.parentNode.querySelector('textarea').value
        axios.post('/hls/import_data', {
            data: data,
        })
            .then(function (response) {
                // console.log(response);
                if (response.status === 200) {
                    let data = response.data
                    if (data['code'] === 0) {
                        console.log('SUCCESS: ' + data['msg'])
                        location.assign('/hls?mode=' + document.querySelector('#view-toogle').checked)
                    } else {
                        console.log('FAILED: ' + data['msg'])
                        alert(data['msg'])
                    }
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    })
    // 删除
    document.querySelectorAll('.delete').forEach(el => {
        el.addEventListener('click', event => {
            // let path = event.target.dataset['path'] ? event.target.dataset['path'] : event.target.parentNode.dataset['path']
            let path = get_parent_data(event.target, 'path')
            if (confirm('删除路径[' + path + ']')) {
                console.log('删除路径[' + path + ']');
                axios.get('/hls/delete', {
                    params: {
                        path: path
                    }
                })
                    .then(function (response) {
                        // console.log(response);
                        if (response.status === 200) {
                            let data = response.data
                            if (data['code'] === 0) {
                                console.log('SUCCESS: ' + data['msg'])
                                location.assign('/hls?path=' + data['msg'] + '&mode=' + document.querySelector('#view-toogle').checked)
                            } else {
                                console.log('FAILED: ' + data['msg'])
                                alert(data['msg'])
                            }
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        })
    })
    // 点击文件名,弹出文件操作选项,并位操作选项添加属性
    // 文件操作列表,清理属性
    $('#showfile').on('hidden.bs.modal', function (event) {
        $('#showfile')[0].querySelector('.modal-content .modal-body').innerHTML = ''
    })
    // 关闭文件操作
    document.querySelector('main').addEventListener('click', () => {
        $('#popupRC').css({ display: 'none' });
    }, false)
    // 暂停
    document.querySelectorAll('.pause').forEach(el => {
        el.addEventListener('click', function (event) {
            let fullpath = event.target.dataset['path']
            axios.get('/hls/pause', {
                params: {
                    fullpath: fullpath
                }
            })
                .then(function (response) {
                    // console.log(response);
                    if (response.status === 200) {
                        let data = response.data
                        if (data['code'] === 0) {
                            console.log('SUCCESS: ' + data['msg'])
                            location.assign('/hls?path=' + data['msg'] + '&mode=' + document.querySelector('#view-toogle').checked)
                        } else {
                            console.log('FAILED: ' + data['msg'])
                            alert(data['msg'])
                        }
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        })
    })
    // 状态
    document.querySelectorAll('.status').forEach(el => {
        el.addEventListener('click', function (event) {
            let fullpath = event.target.dataset['path']
            axios.get('/hls/status', {
                params: {
                    fullpath: fullpath
                }
            })
                .then(function (response) {
                    // console.log(response);
                    if (response.status === 200) {
                        let data = response.data
                        if (data['code'] === 0) {
                            console.log('SUCCESS: ' + data['msg'])
                        } else {
                            console.log('FAILED: ' + data['msg'])
                        }
                        document.querySelector('#status .modal-content').innerHTML = data['msg']
                        $('#status').modal('show')
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        })
    })
    // 刷新
    document.querySelectorAll('.reflash').forEach(el => {
        el.addEventListener('click', function (event) {
            let fullpath = event.target.dataset['path']
            location.assign('/hls?path=' + fullpath.substr(0, fullpath.lastIndexOf('/')) + '&mode=' + document.querySelector('#view-toogle').checked)
        })
    })
    // 开始
    document.querySelectorAll('.restart').forEach(el => {
        el.addEventListener('click', function (event) {
            let fullpath = event.target.dataset['path']
            axios.get('/hls/restart', {
                params: {
                    fullpath: fullpath
                }
            })
                .then(function (response) {
                    // console.log(response);
                    if (response.status === 200) {
                        let data = response.data
                        if (data['code'] === 0) {
                            console.log('SUCCESS: ' + data['msg'])
                            location.assign('/hls?path=' + data['msg'] + '&mode=' + document.querySelector('#view-toogle').checked)
                        } else {
                            console.log('FAILED: ' + data['msg'])
                            alert(data['msg'])
                        }
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        })
    })
    // 预览文件
    document.querySelectorAll('.showfile').forEach(el => {
        el.addEventListener('click', function (event) {
            let src = '{{ hlsurl }}/' + el.dataset['url']
            let video = document.createElement('video')
            video.controls = "controls"
            // video.style = 'object-fit: contain;max-height: 70vh;max-width: 95vw'
            video.style = 'object-fit: contain;max-height: 65vh;width: 100%;background-color: #000'
            let hls = new Hls();
            hls.loadSource(src);
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED, function () {
                video.play();
            });
            /*
            let player = new Clappr.Player({
              source: src,
              // poster: 'http://i.q2img.com/thumb/49/49-C3sBrLODOrG8EIXzzMjD_t_5.jpg',
              mute: true,
              height: 360,
              width: 640,
            });
            player.attachTo(video);
            */
            document.querySelector('#showfile .modal-content .modal-body').innerHTML = ''
            document.querySelector('#showfile .modal-header').innerHTML = el.dataset['name']
            document.querySelector('#showfile .modal-content .modal-body').append(video)
            $('#showfile').modal('show')
        })
    })
    // 移动
    document.querySelectorAll('.move').forEach(el => {
        el.addEventListener('click', function (event) {
            let fullpath = event.target.dataset['path']
            $('#move')[0].querySelector('button').dataset['path'] = fullpath
            $('#move').modal('show')
        })
    })
    // 重命名
    document.querySelectorAll('.rename').forEach(el => {
        el.addEventListener('click', function (event) {
            let fullpath = event.target.dataset['path']
            $('#rename')[0].querySelector('button').dataset['path'] = fullpath
            $('#rename')[0].querySelector('input').value = fullpath.split('/').pop()
            $('#rename').modal('show')
        })
    })
    // 更新封面
    document.querySelectorAll('.update_poster').forEach(el => {
        el.addEventListener('click', function (event) {
            let fullpath = event.target.dataset['path']
            axios.get('/hls/update_poster', {
                params: {
                    fullpath: fullpath
                }
            })
                .then(function (response) {
                    // console.log(response);
                    if (response.status === 200) {
                        let data = response.data
                        if (data['code'] === 0) {
                            console.log('SUCCESS: ' + data['msg'])
                            location.assign('/hls?path=' + data['msg'] + '&mode=' + document.querySelector('#view-toogle').checked)
                        } else {
                            console.log('FAILED: ' + data['msg'])
                            alert(data['msg'])
                        }
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        })
    })
    /**********************************
    // 文件夹操作
    **********************************/
    // 进入
    document.querySelectorAll('.enter').forEach(el => {
        el.addEventListener('click', function (event) {
            // let fullpath = event.target.dataset['path'] ? event.target.dataset['path'] : (event.target.parentNode.dataset['path'] ? event.target.parentNode.dataset['path'] : event.target.parentNode.parentNode.dataset['path'])
            let fullpath = get_parent_data(event.target, 'path')
            location.assign('/hls?path=' + fullpath + '&mode=' + document.querySelector('#view-toogle').checked)
        })
    })
    // 移动
    document.querySelectorAll('#optdir .move').forEach(el => {
        el.addEventListener('click', function (event) {
            let fullpath = event.target.dataset['path']
            $('#move')[0].querySelector('button.move').dataset['path'] = fullpath
            $('#move').modal('show')
        })
    })
    // 重命名
    document.querySelectorAll('#optdir .rename').forEach(el => {
        el.addEventListener('click', function (event) {
            let fullpath = event.target.dataset['path']
            $('#rename')[0].querySelector('button.rename').dataset['path'] = fullpath
            $('#rename').modal('show')
        })
    })
    /*********************************************/
    // 移动
    document.querySelector('#move button').addEventListener('click', event => {
        let el = event.target
        let fullpath = el.dataset["path"]
        let newpath = el.parentNode.querySelector('input').value
        axios.get('/hls/move', {
            params: {
                fullpath: fullpath,
                newpath: newpath,
            }
        })
            .then(function (response) {
                // console.log(response);
                if (response.status === 200) {
                    let data = response.data
                    if (data['code'] === 0) {
                        console.log('SUCCESS: ' + data['msg'])
                        location.assign('/hls?path=' + data['msg'] + '&mode=' + document.querySelector('#view-toogle').checked)
                    } else {
                        console.log('FAILED: ' + data['msg'])
                        alert(data['msg'])
                    }
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    })
    // 重命名
    document.querySelector('#rename button').addEventListener('click', event => {
        let el = event.target
        let fullpath = el.dataset["path"]
        let newname = el.parentNode.querySelector('input').value
        axios.get('/hls/rename', {
            params: {
                fullpath: fullpath,
                newname: newname,
            }
        })
            .then(function (response) {
                // console.log(response);
                if (response.status === 200) {
                    let data = response.data
                    if (data['code'] === 0) {
                        console.log('SUCCESS: ' + data['msg'])
                        location.assign('/hls?path=' + data['msg'] + '&mode=' + document.querySelector('#view-toogle').checked)
                    } else {
                        console.log('FAILED: ' + data['msg'])
                        alert(data['msg'])
                    }
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    })
    // 源地址
    document.querySelectorAll('.referer').forEach(el => {
        el.addEventListener('click', function (event) {
            let referer = event.target.dataset['path']
            document.querySelector('#referer .modal-content').innerHTML = referer
            $('#referer').modal('show')
        })
    })
    // 修改,右键菜单[修改]按钮
    document.querySelectorAll('.update').forEach(el => {
        el.addEventListener('click', function (event) {
            document.querySelector('#update .modal-content input[name="path"]').value = el.dataset['path']
            document.querySelector('#update .modal-content input[name="status"]').value = el.dataset['status']
            document.querySelector('#update .modal-content input[name="referer"]').value = el.dataset['referer']
            document.querySelector('#update .modal-content input[name="referer_referer"]').value = el.dataset['referer_referer']
            document.querySelector('#update .modal-content input[name="poster_referer"]').value = el.dataset['poster_referer']
            document.querySelector('#update .modal-content input[name="url"]').value = el.dataset['url']
            $('#update').modal('show')
        })
    })
    // 修改modal收起时,去掉属性
    $('#update').on('hidden.bs.modal', function (event) {
        document.querySelectorAll('#update .modal-content input[name]').forEach(el => {
            el.value = ''
        })
    })
    // 修改[确定]按钮
    document.querySelector('#update .modal-content button.btn-success').addEventListener('click', function (event) {
        let path = document.querySelector('#update .modal-content input[name="path"]').value
        let status = document.querySelector('#update .modal-content input[name="status"]').value
        let referer = document.querySelector('#update .modal-content input[name="referer"]').value
        let referer_referer = document.querySelector('#update .modal-content input[name="referer_referer"]').value
        let poster_referer = document.querySelector('#update .modal-content input[name="poster_referer"]').value
        let url = document.querySelector('#update .modal-content input[name="url"]').value
        axios.get('/hls/update', {
            params: {
                path: path,
                status: status,
                referer: referer,
                referer_referer: referer_referer,
                poster_referer: poster_referer,
                url: url,
            }
        })
            .then(function (response) {
                // console.log(response);
                if (response.status === 200) {
                    let data = response.data
                    if (data['code'] === 0) {
                        console.log('SUCCESS: ' + data['msg'])
                        location.assign('/hls?path=' + data['msg'] + '&mode=' + document.querySelector('#view-toogle').checked)
                    } else {
                        console.log('FAILED: ' + data['msg'])
                        alert(data['msg'])
                    }
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    })
    // 解析网页
    function load_src(event) {
        let url = document.querySelector('#update .modal-content input[name="referer_referer"]').value
        let dom_path = document.querySelector('#update .modal-content input[name="dom_path"]').value
        let get_res = document.querySelector('#update .modal-content input[name="get_res"]').value
        let mode = 0
        if (event.target.classList.contains('btn-primary')) {
            mode = 1
        } else {
            document.querySelector('#update .modal-content input[name="dom_path"]').value = "[{'video': {'attr': {'id': 'video-play'}, 'string': ''}}]"
            document.querySelector('#update .modal-content input[name="get_res"]').value = "{'attrs': ['data-src', 'data-poster']}"
        }
        document.querySelector('#update .modal-content textarea[name="result"]').innerText = '信息获取中...'
        if (url === 'None' || url.length === 0) {
            alert('[ERROR]关联网址未指定')
            return
        }
        axios.get('/hls/load_src', {
            params: {
                url: url,
                dom_path: dom_path,
                get_res: get_res,
                mode: mode
            }
        })
            .then(function (response) {
                // console.log(response);
                if (response.status === 200) {
                    let data = response.data
                    if (data['code'] === 0) {
                        console.log('SUCCESS: ' + data['msg'])
                        document.querySelector('#update .modal-content textarea[name="result"]').innerText = data['msg']
                    } else {
                        console.log('FAILED: ' + data['msg'])
                        alert(data['msg'])
                    }
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    }
    // mode-1,点击[获取播放源]按钮
    document.querySelector('#load_src button').addEventListener('click', load_src)
    // mode-0,展开播放源
    $('#load_src').on('show.bs.collapse', load_src)
    $('#view-toogle').change(function (event) {
        console.log(event.target.checked)
        location.assign('/hls?path=/{{ path | join(' / ')}}&mode=' + document.querySelector('#view-toogle').checked)
    })
    // 获取父级元素data
    function get_parent_data(el, key) {
        let tmp = el
        while (!el.dataset[key]) {
            if (el.tagName === 'HTML') break
            el = el.parentNode
        }
        // if (!el.dataset[key]) {
        //   console.error('元素[' + el + ']及其父级元素未设置data-' + key)
        // }
        return el.dataset[key]
    }
</script>
{% endblock %}